<template>
    <n-space>
        <n-input-group>
            <n-input placeholder="请输入关键字" clearable v-model:value="params.pageInfo.keywords"/>
            <n-button type="primary" ghost @click="findPage">搜索</n-button>
        </n-input-group>
    </n-space>
    <n-data-table
        remote
        ref="table"
        :columns="columns"
        :data="dataList"
        :loading="loading"
        :pagination="params.pageInfo"
        :row-key="rowKey"
        @update:page="handlePageChange"
    />
    <n-modal
        v-model:show="dialog.showModal"
        :title="dialog.title"
        preset="dialog"
        :positive-text="dialog.positiveText"
        :negative-text="dialog.negativeText"
        @positive-click="submitCallback"
        @negative-click="cancelCallback">
        <n-form ref="formRef" :model="form">
            <n-form-item path="name" label="登录名" v-if="dialog.action === 2">
                <n-input v-model:value="form.name" placeholder="请输入登陆名" />
            </n-form-item>
            <n-form-item path="password" label="密码">
                <n-input v-model:value="form.password" placeholder="请输入密码" show-password-on="mousedown" type="password" />
            </n-form-item>
            <n-form-item label="角色" v-if="dialog.action === 2">
                <n-select
                    placeholder="请选择角色"
                    v-model:value="form.role"
                    :options="roleOptions"
                    clearable
                />
            </n-form-item>
        </n-form>
    </n-modal>
</template>
<script lang="ts">
import { ref, reactive, defineComponent } from 'vue';
import { pageUser,resetPassword,setUserInfo } from "@/api/user/user";
import {NAvatar, NButton, NTag, NDropdown} from 'naive-ui';
import {getImageUrl} from "@/utils/wish";
import { userStore } from "@/store/modules/user";

export default defineComponent({
    setup() {
        const columns = ref([{
            title: '登录名',
            align: 'center',
            key: 'username'
        }, {
            title: '昵称',
            align: 'center',
            key: 'nickName',
        }, {
            title: '性别',
            key: 'sex',
            align: 'center',
            render: (row: any) => {
                return h(NTag, {
                    style: {
                        marginRight: '6px'
                    },
                    type: 'info',
                    bordered: false
                }, {
                    default: () => row.sex == 1 ? '男' : row.sex == '2' ? '女' : '未知'
                });
            },
        }, {
            title: '头像',
            key: 'avatar',
            align: 'center',
            render: (row: any) => {
                return h(NAvatar, {
                    size: 48,
                    src: getImageUrl(row.avatar),
                    round: true
                }, {
                    default: () => {}
                });
            }
        }, {
            title: '手机号码',
            key: 'phonenumber',
            render: (row: any) => {
                return row.phonenumber.substring(0, 3) + '****' + row.phonenumber.substring(7);
            }
        }, {
            title: '角色',
            key: 'role',
            render: (row: any) => {
                if (row.role == 1) {
                    return '社区管理员';
                } else if (row.role == 2) {
                    return '社区工作人员';
                } else if (row.role == 3) {
                    return '区级管理员';
                } else if (row.role == 4) {
                    return '市级管理员';
                } else {
                    return '社区居民'
                }
            }
        }, {
            title: '操作',
            render: (row: any) => {
                return h(NDropdown, {
                    options: [
                        {
                            label: `重置密码`,
                            key: 'resetpwd',
                            props: {
                                onClick: () => {
                                    dialog.title = '修改密码';
                                    dialog.action = 1;
                                    form.id = row.id;
                                    dialog.showModal = true;
                                }
                            }
                        },
                        {
                            label: `设置角色`,
                            key: 'setRole',
                            props: {
                                onClick: () => {
                                    dialog.title = '设置角色';
                                    dialog.action = 2;
                                    const value = userInfo.value;
                                    const temp = [];
                                    if (value.username == 'admin') {
                                        temp.push({ label: '社区工作人员', value: 2 });
                                        temp.push({ label: '社区管理员', value: 1 });
                                        temp.push({ label: '区级管理员', value: 3 });
                                        temp.push({ label: '市级管理员', value: 4 });
                                    } else if (value.role == 2) {
                                        temp.push({ label: '社区工作人员' });
                                    } else if (value.role == 3) {
                                        temp.push({ label: '社区工作人员', value: 2 });
                                        temp.push({ label: '社区管理员', value: 1 });
                                    } else if (value.role == 4) {
                                        temp.push({ label: '社区工作人员', value: 2 });
                                        temp.push({ label: '社区管理员', value: 1 });
                                        temp.push({ label: '区级管理员', value: 3 });
                                    }
                                    roleOptions.value = temp;
                                    form.role = row.role;
                                    form.name = row.username;
                                    dialog.showModal = true;
                                }
                            }
                        },
                    ]
                }, { default: () => h(NButton, {size: 'small',}, {default: () => '更多↓'}) });
            }
        }]);
        const userInfo: any = computed(() => userStore().userInfo);
        const loading = ref();
        const dataList = ref([]);
        const params = reactive({
            pageInfo: {
                page: 1,
                pageCount: 1,
                pageSize: 10,
                keywords: ``
            },
            user: {
                role: userInfo.value.role,
                areaCode: userInfo.value.areaCode
            }
        });
        const dialog = reactive({
            title: ``,
            showModal: false,
            positiveText: '确认',
            negativeText: '取消',
            action: 1 // 1重置密码2设置角色
        });
        const roleOptions = ref<any[]>([]);
        const form = reactive({
            password: ``,
            role: undefined,
            name: '',
            id: 0
        });
        onMounted(() => {
            findPage();
        });
        const findPage = async () => {
            const { rows, total }: any = await pageUser(params);
            params.pageInfo.pageCount = total;
            dataList.value = rows;
        }

        const handlePageChange = (page: number) => {
            params.pageInfo.page = page;
            findPage();
        }

        const submitCallback = async () => {
            let res: any;
            if (dialog.action == 1) {
                res = await resetPassword(form);
            } else {
                if (form.name.indexOf('admin') != -1) {
                    window.$message.error('登录名不能有admin关键字');
                    return false;
                }
                res = await setUserInfo(form);
            }
            if (res.code == 200) {
                dialog.showModal = false;
                await findPage();
            } else {
                return false;
            }
        }

        return {
            dataList,
            params,
            loading,
            columns,
            rowKey: (row: any) => {
                return row.id;
            },
            handlePageChange,
            findPage,
            dialog,
            cancelCallback: () => {
                dialog.showModal = false;
            },
            form,
            roleOptions,
            submitCallback
        }
    }
});
</script>
<style scoped lang="scss">
</style>
